/*
  学习目标：React表单- 受控组件
  1. 表单元素的值(value/ checked属性)受state的控制
  2. onChange配合setState修改数据
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    msg: 'hello React',
  };

  render() {
    const { msg } = this.state;
    return (
      <div>
        <input
          onChange={(e) => {
            this.setState({ msg: e.target.value });
          }}
          type="text"
          value={msg}
          // 💥 React对onChange进行了封装，不用onInput
          // onInput={(e) => {
          //   this.setState({ msg: e.target.value });
          // }}

          // 失去焦点事件
          onBlur={() => {
            alert(213);
          }}
        />
      </div>
    );
  }
}
